<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>

  // ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

  // 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

  class Cat {
    // 定义构造函数
    constructor(name, color) {
      this.name = name;
      this.color = color;
    }

    // class中声明的变量 会作为实例化对象的属性 直接存储到 构造函数创建的实例化对象中
    // species = "cat";


    // 原型对象 公有的方法
    call() {
      console.log("喵喵");
    }
    skill() {
      console.log("捉老鼠");
    }
    say() {
      console.log(this.name, this.age);
    }

  }

  // 也可以在class创建完毕 手动添加原型对象共有的属性 
  Cat.prototype.species = "cat";

  // 方便理解  => es5不能这么写
  // Cat.prototype = {
  //     constructor(name, color) {
  //         this.name = name;
  //         this.color = color;
  //     },
  //     species: "cat",
  //     call() {
  //         console.log("喵喵");
  //     },
  //     skill() {
  //         console.log("捉老鼠");
  //     },
  //     say() {
  //         console.log(this.name, this.age);
  //     }
  // }
  console.dir(Cat);

  var Tom = new Cat("Tom", "black");
  console.log(Tom);


</script>

</html>